import React from 'react'
import { useSelector } from 'react-redux';
import { httpPost } from '@/axios';
import { Dropdown } from 'antd';
import { Image } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import user_bg from "@/assets/images/header/user.png"
import style from "./index.module.less"

const Header = () => {
  const user = useSelector(state => state.user);
  const navigate = useNavigate();

  const outLogin = async () => {
    const res = await httpPost('/user/logout');
    if (res) {
      navigate('/login');
    }
  }

  const items = [
    {
      key: '1',
      label: <a onClick={outLogin}>退出登录</a>
    }
  ];
  return (
    <div className={style.big_box}>
      <Dropdown menu={{ items }} placement="bottom">
        <div className={style.left}>
          <Image width={22} height={22} src={user_bg} />
          <span>{user?.text || '未登录'}</span>
        </div>
      </Dropdown>
      {/* <div onClick={outLogin} className={style.right}>
        <Image width={20} height={20} src={qiehuan} />
        <span>切换身份</span>
      </div> */}
    </div>
  )
}

export default Header;
